<!--  -->
<script setup>
import { ref, reactive, toRefs,defineProps, defineEmits, defineExpose, onBeforeMount, onMounted, onUnmounted, watchEffect, computed } from 'vue' // eslint-disable-line
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import screenfull from 'screenfull'
/**
* 仓库
*/
const store = useStore() // eslint-disable-line
/**
* 路由对象
*/
const route = useRoute() // eslint-disable-line
/**
* 路由实例
*/
const router = useRouter() // eslint-disable-line
// 1-开始创建组件-setup
/**
*传值
*/
const props = defineProps({}) // eslint-disable-line
const emits = defineEmits([]) // eslint-disable-line
/**
* 数据部分
*/
// 是否全屏
const isFullscreen = ref(false)
// 监听变化
const change = () => {
  isFullscreen.value = screenfull.isFullscreen
}
// 切换事件
const onToggle = () => {
  screenfull.toggle()
}
const data = reactive({}) // eslint-disable-line
// 2.组件挂载页面之前执行----onBeforeMount
onBeforeMount(() => {})
// 3.-组件挂载到页面之后执行-------onMounted
onMounted(() => {
  // 设置侦听器
  screenfull.on('change', change)
})
onUnmounted(() => {
  // 删除侦听器
  screenfull.off('change', change)
})
watchEffect(() => {})
// 使用toRefs解构
// let { } = { ...toRefs(data) } // eslint-disable-line
// 组件方法暴露
// defineExpose()

</script>
<template>
  <div>
    <svg-icon
      :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="onToggle"
    />
  </div>
</template>

<style scoped lang='less'>
</style>
